<template>
	<view class="cake-item" @click="handleDetail" :style="{marginRight:cakeIdx%2==0?'20upx':'0'}">
		<image :src="cakeData.img" mode=""></image>
		<view class="flex justify-between align-center">
			<view class="">
				<view class="fs-30">
					{{cakeData.name}}
				</view>
				<view class="fs-14 margin-tb-xs">
					{{cakeData.french}}
				</view>
			</view>
			<view class="cart-btn margin-right-xs" @click.stop="handleCartPop">
				<text class="iconfont icon-gouwuche"></text>
			</view>
		</view>
		<view class="fs-16">
			<text>￥</text>
			{{cakeData.price}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "cake-item",
		props: {
			cakeData: {
				type: Object,
				required:true
			},
			cakeIdx:{
				type:Number,
				required:true
			}
		},
		data() {
			return {

			};
		},
		created() { //在公共组件中使用
			// console.log('cake-item组件的created');
		},
		methods: {
			handleDetail() {
				uni.setStorage({
					key:'detail',
					data:this.cakeData,
					success: () => {
						uni.navigateTo({
							url:'/sub_pages_1/detail/detail'
						})
					}
				})
				
			},
			handleCartPop(){
				this.$store.commit('cart/popShowMut')
				this.$store.commit('cart/editIdxMut',-1)
				this.$store.commit('cart/popDataMut',this.cakeData)
			}
		},
	}
</script>

<style lang="scss">
	.cake-item {
		width: 350upx;
		margin-bottom: 20upx;
		margin-right: 20upx;

		&:nth-of-type(2n) {
			margin-right: 0;
		}

		image {
			width: 350upx;
			height: 350upx;
		}
	}
	.cart-btn{
		width: 60upx;
		height: 60upx;
		background-color: #fae456;
		border-radius: 50%;
		text-align: center;
		line-height: 60upx;
	}
</style>
